import Head from '../../compontent/Header'
import React, { useEffect, useState } from 'react'
import style from './style.module.less'
import { Layout, Button, message } from 'antd'
import { useHistory } from 'react-router-dom'
import * as api from '../../services/api'
import GetAvatar from '../../compontent/GetAvatar'
import ArticleList from '../../compontent/ArticleList'
import { EditOutlined } from '@ant-design/icons'

export default function Personal(props: any) {
  let token: string = props.match.params.id

  const [nickname, setNickname] = useState<string>('')

  const { Header, Content, Sider } = Layout

  const history = useHistory()

  useEffect(() => {
    getUserInfo()
  }, [])

  function jumpPersonalUpdate() {
    history.push(`/personalUpdate/${token}`)
  }

  function jumpCreate() {
    history.push(`/create/${token}`)
  }

  async function getUserInfo() {
    try {
      let res = await api.getUserInfo(token)
      if (res.data.stat === 'ok') {
        if (res.data.data.nickname === '') {
          setNickname(res.data.data.account)
        } else {
          setNickname(res.data.data.nickname)
        }
      } else {
        message.error(res.data.msg)
      }
    } catch (e) {
      throw e
    }
  }

  return (
    <>
      <Head token={token} />
      <div className={style.main}>
        <Layout>
          <Header className={style.bodyHeader}>
            <span>个人中心</span>
            <span className={style.create} style={{ float: 'right' }} onClick={jumpCreate}>
              <EditOutlined />
              开始创作
            </span>
          </Header>
          <Layout>
            <Sider className={style.bodySider}>
              <GetAvatar token={token} />
              <p className={style.userName}>{nickname}</p>
              <Button
                className={style.userUpdate}
                onClick={jumpPersonalUpdate}>
                修改个人信息
              </Button>
            </Sider>
            <Content className={style.bodyContent}>
              <ArticleList token={token} />
            </Content>
          </Layout>
        </Layout>
      </div>
    </>
  )
}
